<template>
    <div class="layout-content-container">

        <!-- 标签导航 -->
        <tags-nav></tags-nav>

        <div class="content-wrapper page-component__scroll el-scrollbar__wrap" :style="{height: (screenHeight - 104) + 'px'}">

            <transition name="fade-transform" mode="out-in">
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </transition>
            
            <!-- 返回顶部 -->
            <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>

        </div>
    </div>
</template>

<script>
import TagsNav from './components/tags-nav/tags-nav.vue'
export default {
    name: "Content",
    components: {
        TagsNav
    },
    data() {
        return {
            //设置 content-wrapper 高度
            screenHeight: 0
        };
    },
    mounted() {
        // 监听窗口大小变化
        this.screenWidth = document.documentElement.clientWidth || document.body.clientWidth
        this.screenHeight = document.documentElement.clientHeight || document.body.clientHeight
        window.onresize = () => {
            return (() => {
                this.screenWidth = document.documentElement.clientWidth || document.body.clientWidth
                this.screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            })();
        };
        
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>